<template>
  <view>
    <!-- MUMI MALL -->
    <u-sticky>
      <view style="background-color: #ffffff; padding: 0rpx 40rpx 20rpx 40rpx">
        <view class="header">
          <view class="index-title">MUMI MALL</view>
          <view class="index-search" @click="changePosition">
            <view class="icon-weizhidingwei iconfont"></view>
            <view class="u-line-1"> {{ vuex_default_address.addressName }} </view>
          </view>
        </view>
        <view class="seccond-title">喵咪宜购</view>
      </view>
    </u-sticky>
  </view>
</template>

<script>
export default {
  data() {
    return {
      postion:''
    };
  },
  created() {
    if (!this.vuex_default_address.hasOwnProperty("addressName")) {
      this.changePosition();
    } else {
      this.postion = this.vuex_default_address.addressName;
    }
  },
  watch: {
    vuex_default_address: {
      handler(newV, oldV) {
        this.postion = newV.addressName;
      },
    },
    immediate:true
  },
  methods: {
    /**
     * 更换地址
     */
    changePosition() {
      var _this = this;
      uni.authorize({
        scope: "scope.userLocation",
        success(res) {
          _this.chooseLocationAgin();
        },
        fail() {
          // 定位权限未开启，引导设置
          uni.showModal({
            title: "温馨提示",
            content: "您已拒绝定位,请开启",
            confirmText: "去设置",
            success(res) {
              if (res.confirm) {
                // 打开设置
                uni.openSetting({
                  success(res) {
                    _this.chooseLocationAgin();
                  },
                });
              }
            },
          });
        },
      });
    },
    /**
     * 选择地理位置
     */
    chooseLocationAgin() {
      var _this = this;
      uni.chooseLocation({
        success: function (res) {
          _this.postion = res.name;
          var form = {
            addressName: res.name,
            detailAddress: res.address,
            latitude: res.latitude,
            longitude: res.longitude,
          };
          _this.$u.vuex("vuex_default_address", form);
          console.log(form)
        },
        fail: function (res) {
          _this.$u.toast("位置获取失败");
        },
      });
    },
  },
};
</script>

<style scoped lang ='scss' >
$titleWidth: 380rpx;

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #5C6166;
  /* padding: 40rpx 0 0rpx 0; */
  /* background-color: #; */
  .index-title {
    width: 330rpx;
    font-size: 56rpx;
    /* font-weight: bold; */
    width: $titleWidth;
    text-align: justify;
    font-weight: bold;
    font-family: PingFangSC-bold;
  }
  .index-title:after {
    /* content: ""; */
    width: 100%;
    display: inline-block;
  }
  .index-search {
    width: 200rpx;
    height: 48rpx;
    line-height: 48rpx;
    padding-left: 20rpx;
    border-radius: 10rpx;
    color: #a0a09a;
    font-size: 24rpx;
    text-align: center;
    /* background-color: gray; */
  }
}
.seccond-title {
  width: 330rpx;
  text-align-last: justify;
  padding: 0 5rpx;
  color: #5C6166;
}
</style>
